<template>
  <div>
    <div style="margin:2% 0;display: inline-block;">
      <span>商铺名称：</span>
      <el-input style="width: 150px;" @keydown.enter.native="select" clearable placeholder="请输入商铺名称" v-model="shopName1">
      </el-input>&nbsp;&nbsp;&nbsp;&nbsp;
      <!-- <el-select v-model="shopId1" class="margin15" placeholder="请选择商品类型" style="width:200px;" @change="handleChange()">
        <el-option v-for="(item,index) in shopIdDatas" :key="index" :label="item.classifyName" :value="item.classifyId">
        </el-option>
      </el-select>&nbsp;&nbsp;&nbsp;&nbsp; -->
    </div>
    <div style="float: right;margin-right:2%;">
     <!-- <el-button :disabled="!isAuth('classifyAdmin:add')" icon="document" size="mini" style="margin: 10px 0;"
        type="primary" @click="addNotice">添加分类</el-button> -->
    </div>
    <el-table v-loading="tableDataLoading" :data="typeDatas.records" row-key="id">
      <el-table-column label="编号" prop="classifyId">
      </el-table-column>
      <el-table-column label="商铺名称" prop="shopName">
      </el-table-column>
      <el-table-column label="名称" prop="classifyName">
      </el-table-column>
      <el-table-column prop="sort" label="排序">
        <template slot-scope="scope">
          <el-input-number size="small" v-model="scope.row.sort" :min="0" @change="paixuS(scope.row)">
          </el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button :disabled="!isAuth('classifyAdmin:update')" size="mini" type="primary"
            @click="updates(scope.$index, scope.row)">修改
          </el-button>
          <el-button :disabled="!isAuth('classifyAdmin:delete')" size="mini" type="danger" @click="deletes(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加分类 -->
    <el-dialog :visible.sync="dialogFormVisible" center :title="titles">
      <div style="margin-bottom: 10px;">
        <span style="width: 200px;display: inline-block;text-align: right;">商铺名称：</span>
        <el-input v-model="shopName" placeholder="请输入分类名称" style="width:50%;" disabled></el-input>
      </div>
      <div style="margin-bottom: 10px;">
        <span style="width: 200px;display: inline-block;text-align: right;">分类名称：</span>
        <el-input v-model="classifyName" placeholder="请输入分类名称" style="width:50%;"></el-input>
      </div>
      <div style="margin-bottom: 10px;">
        <span style="width: 200px;display: inline-block;text-align: right;">分类排序：</span>
        <el-input v-model="sort" placeholder="请输入分类排序" style="width:50%;"></el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="releasNoticeTo()">确 定</el-button>
      </div>
    </el-dialog>
    <div style="text-align: center;margin-top: 10px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100]" :page-size="size" :current-page="page"
        layout="total,sizes, prev, pager, next" :total="typeDatas.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        size: 10,
        page: 1,
        shopId:'',
        classifyId: '',
        classifyName: '',
        shopName:'',
        tableDataLoading: false,
        dialogFormVisible: false,
        typeDatas: [],
        titles: '添加',
        shopName1:'',
        shopIdDatas:[],
        sort:0,
      }
    },
    methods: {
      handleCurrentChange(val) {
        this.page = val
        this.dataSelect()
      },

      handleSizeChange(val) {
        this.size = val
        this.classifySelect()
      },

      // 添加分类弹框
      addNotice() {
        this.dialogFormVisible = true
        this.titles = '添加'
        this.classifyId = ''
        this.classifyName = ''
        this.shopId = ''
        this.shopName = ''
        this.page=1;
        this.sort = 0
        this.classifySelect()
      },
      // 添加分类
      releasNoticeTo() {
        if (this.classifyName == '') {
          this.$notify({
            title: '提示',
            duration: 1800,
            message: '请输入分类名称',
            type: 'warning'
          })
          return
        }
        if (this.titles == '添加') {
          var url = 'admin/goods/insertClassify'
        }
        if (this.titles == '修改') {
          var url = 'admin/goods/updateClassify'
        }
        this.$http({
          url: this.$http.adornUrl(url),
          method: 'post',
          data: this.$http.adornData({
            'classifyId': this.classifyId,
            'classifyName': this.classifyName,
            'shopId':this.shopId,
            'sort':this.sort
          })
        }).then(({
          data
        }) => {
					if(data.code==0){
						this.dialogFormVisible = false
						this.$message({
						  message: '操作成功',
						  type: 'success',
						  duration: 1500,
						  onClose: () => {
						
						    this.dataSelect()
						  }
						})
					}else{
							this.$message({
							  message: data.msg,
							  type: 'error',
							  duration: 1500,
							  onClose: () => {
							  }
							})
						}
          
        })
      },
      // 修改弹框
      updates(index, rows) {
        this.classifyId = rows.classifyId
        this.classifyName = rows.classifyName
        this.shopId = rows.shopId
        this.shopName = rows.shopName
        this.sort = rows.sort
        this.titles = '修改'
        this.dialogFormVisible = true

      },

      // 删除分类
      deletes(row) {
        this.$confirm(`确定删除此条信息?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('admin/goods/deleteClassify'),
            method: 'get',
            params: this.$http.adornParams({
              'classifyId': row.classifyId
            })
          }).then(({
            data
          }) => {
						if(data.code==0){
							this.$message({
							  message: '删除成功',
							  type: 'success',
							  duration: 1500,
							  onClose: () => {
							    this.dataSelect()
							  }
							})
						}else{
							this.$message({
							  message: data.msg,
							  type: 'error',
							  duration: 1500,
							  onClose: () => {
							  }
							})
						}
           
          })
        }).catch(() => {})

      },
      // 获取分类数据
      dataSelect() {
        this.tableDataLoading = true
        this.$http({
          url: this.$http.adornUrl('admin/goods/selectAllClassify'),
          method: 'get',
          params: this.$http.adornParams({
            'shopName':this.shopName1,
            'page':this.page,
            'limit':this.size
          })
        }).then(({
          data
        }) => {

          this.tableDataLoading = false
          let returnData = data.data
          this.typeDatas = returnData
        })
      },
      //输入触发搜索
      select(){
        this.page=1
        this.dataSelect()
      },
      // 分类排序
      paixuS(row) {
        this.$http({
          url: this.$http.adornUrl('admin/goods/updateClassify'),
          method: 'post',
          data: this.$http.adornData({
            'classifyId': row.classifyId,
            'sort': row.sort
          })
        }).then(({
          data
        }) => {
          if (data.code == 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.dataSelect()
              }
            })
          } else {
            this.$message({
              message: data.msg,
              type: 'error',
              duration: 1500,
              onClose: () => {}
            })
          }
        })
      },
    },
    mounted() {
      this.dataSelect()
    }
  }
</script>

<style>

</style>
